<!-- 模板管理 -->
<template>
    <div class='p-templateManagement app-container'>
        <div class="list-wrapper" style="flex: 1;">
            <div class="content">
                <div class="title">
                    <span>模板管理</span>
                </div>
                <div class="operation">
                    <el-button @click="handleAdd">新增模板</el-button>
                    <el-button @click="handleGrouping">模板分组管理</el-button>
                    <el-button @click="handleSelect">下拉列表管理</el-button>
                </div>
                <comm-table ref="dragTable" :loading="loading" :data="tableData" style="width: 100%">
                    <!-- <el-table-column width="80" type="selection" /> -->
                    <el-table-column prop="code" label="模板编号" width="90" />
                    <el-table-column prop="name" label="模板分组" width="120" />
                    <el-table-column prop="codename" label="模板名称" width="90" />
                    <el-table-column prop="status" label="模板状态" width="80">
                        <template slot-scope="scope">
                            <el-switch
                                v-model="scope.row.status"
                                :active-value="1"
                                :inactive-value="2"
                                active-color="#93DD78"
                                inactive-color="#B9B9B9"
                                @change="changeSwitch(scope.row)"/>
                        </template>
                    </el-table-column>
                    <el-table-column prop="peoplename" label="创建人" width="100" />
                    <el-table-column prop="creatdata" label="创建时间" width="140" />
                    <el-table-column prop="data" label="修改时间" width="140" />
                    <el-table-column prop="ramk" label="模板备注" width="80" />
                    <el-table-column label="操作" width="200">
                        <template>
                            <span class="operation-btn">修改</span>
                            <span class="operation-btn">删除</span>
                        </template>
                    </el-table-column>
                </comm-table>
            </div>
        </div>
    </div>
</template>

<script>
    import TableCommMixin from '@/mixins/TableCommMixin'
    export default {
        name:'p-templateManagement',
        mixins: [TableCommMixin],
        data() {
            return {
                tableData:[
                    {'code':'1','name':'设备模板','codename':'模板名称1','status':1,'peoplename':'管理员','creatdata':'2020-06-14 19:15','data':'2020-06-15 19:15','ramk':'测试'},
                    {'code':'1','name':'设备模板','codename':'模板名称1','status':2,'peoplename':'管理员','creatdata':'2020-06-14 19:15','data':'2020-06-15 19:15','ramk':'测试'},
                    {'code':'1','name':'设备模板','codename':'模板名称1','status':1,'peoplename':'管理员','creatdata':'2020-06-14 19:15','data':'2020-06-15 19:15','ramk':'测试'},
                    {'code':'1','name':'设备模板','codename':'模板名称1','status':1,'peoplename':'管理员','creatdata':'2020-06-14 19:15','data':'2020-06-15 19:15','ramk':'测试'},
                    {'code':'1','name':'设备模板','codename':'模板名称1','status':1,'peoplename':'管理员','creatdata':'2020-06-14 19:15','data':'2020-06-15 19:15','ramk':'测试'},
                    {'code':'1','name':'设备模板','codename':'模板名称1','status':1,'peoplename':'管理员','creatdata':'2020-06-14 19:15','data':'2020-06-15 19:15','ramk':'测试'},
                    {'code':'1','name':'设备模板','codename':'模板名称1','status':1,'peoplename':'管理员','creatdata':'2020-06-14 19:15','data':'2020-06-15 19:15','ramk':'测试'}
                ]
            }
        },
        methods: {
            //表格开关
            changeSwitch (row) {
                console.log(row)
            },
            //新增模板
            handleAdd() {

            },
            //模板分组管理
            handleGrouping() {

            },
            //下拉列表管理
            handleSelect() {

            },
        },
        mounted() {

        },
    }
</script>
<style rel="stylesheet/scss" lang="scss">
    .p-templateManagement {

    }
</style>
